$(function () {
    $('.middleArea').css('width', $('.bigArea').width() / $('.bigImg').width() * $('.middleImg').width());
    $('.middleArea').css('height', $('.bigArea').height() / $('.bigImg').height() * $('.middleImg').height());

    // 鼠标进入显示
    $('.middleImg').mouseenter(function () {
        $('.middleArea').show();
        $('.bigArea').show();
    })

    // 元素内移动 
    $('.middleImg').mousemove(function (e) {
        // 获取移动的坐标
        let disX = e.pageX - parseInt($('.middleImg').offset().left) - $('.middleArea').width() / 2;
        let disY = e.pageY - parseInt($('.middleImg').offset().top) - $('.middleArea').height() / 2;
        if (disX <= 0) {
            disX = 0;
        }
        if (disY <= 0) {
            disY = 0;
        }
        if (disX >= $('.middleImg').width() - $('.middleArea').width()) {
            disX = $('.middleImg').width() - $('.middleArea').width();
        }
        if (disY >= $('.middleImg').height() - $('.middleArea').height()) {
            disY = $('.middleImg').height() - $('.middleArea').height();
        }
        $('.middleArea').css('left', disX);
        $('.middleArea').css('top', disY);
        $('.bigImg').css('left', ($('.bigImg').width() / $('.middleImg').width() * disX * -1));
        $('.bigImg').css('top', ($('.bigImg').width() / $('.middleImg').width() * disY * -1));
    })

    // 移出元素隐藏
    $('.middleImg').mouseleave(function () {
        $('.middleArea').hide();
        $('.bigArea').hide();
    })

    // 点击小图标切换
    $('.small-list').find("li").each(function (item, index) {
        $(index).click(function () {
            $('.middleImg img').attr('src', `img/phone3_${item+1}.jpeg`);
            $('.bigImg').attr('src', `img/phone3_${item+1}.jpeg`);
        })
    })

    // 左右点击切换小图标列表
    let imgIndex = 0;
    $(".left-arr").on("click", function () {
        imgIndex--;
        if (imgIndex < 0) {
            imgIndex = 0;
            $(".left-arr").css({
                opacity: 0.3
            });
        } else {
            $(".left-arr").css({
                opacity: 1
            });
            $(".right-arr").css({
                opacity: 1
            });
        }
        $(".small-list ul").animate({
            left: imgIndex * -130
        }, 300);
    })
    $(".right-arr").on("click", function () {
        imgIndex++;
        if (imgIndex > $(".small-list ul").children().length - 4) {
            imgIndex = $(".small-list ul").children().length - 4;
            $(".right-arr").css({
                opacity: 0.3
            });
        } else {
            $(".left-arr").css({
                opacity: 1
            });
            $(".right-arr").css({
                opacity: 1
            });
        }
        $(".small-list ul").animate({
            left: imgIndex * -130
        }, 300);
    })

    // 参数变化
    $(".theme-light").eq(0).find(".btn-outlined").click(function () {
        if ($(this).hasClass("btn-disabled")) {
            return
        }
        if ($(this).find(".text-truncate").text() == "8G+256G") {
            $(".sale-price").find("span").eq(1).html("3699");
            $(".price").children().html("¥3699.00")
            $(".txt").find("span").eq(0).html("8G+256G")
        } else {
            $(".sale-price").find("span").eq(1).html("3999")
            $(".price").children().html("¥3999.00")
            $(".txt").find("span").eq(0).html("12G+256G")
        }

        $(".theme-light").eq(0).find(".btn-outlined").removeClass("btn-active")
        $(this).addClass("btn-active");
        $(".tit").find("span").eq(0).html($(this).find(".text-truncate").html())

    })
    $(".theme-light").eq(1).find(".btn-outlined").click(function () {
        if ($(this).hasClass("btn-disabled")) {
            return
        }
        $(".txt").find("span").eq(1).html($(this).find(".text-truncate").html())
        $(".theme-light").eq(1).find(".btn-outlined").removeClass("btn-active")
        $(this).addClass("btn-active")
        $(".tit").find("span").eq(1).html($(this).find(".text-truncate").html())
    })
    $(".theme-light").eq(2).find(".btn-outlined").click(function () {
        if ($(this).hasClass("btn-disabled")) {
            return
        }
        $(".theme-light").eq(2).find(".btn-outlined").removeClass("btn-active")
        $(this).addClass("btn-active")
        $(".tit").find("span").eq(2).html($(this).find(".text-truncate").html())
    })

    $(".del-btn").click(function () {
        if ($(".num-input").val() == 1) {
            return;
        } else {
            $(".num-input").val(Number($(".num-input").val()) - 1);
            if ($(".num-input").val() == 1) {
                $(".del-btn").find("span").css("color", "rgba(0,0,0,0.5)");
            } else {
                $(".add-btn").find("span").css("color", "rgba(0,0,0,1)");
                $(".del-btn").find("span").css("color", "rgba(0,0,0,1)");
            }
        }
        $(".txt").find("span").eq(3).html($(".num-input").val())
    })
    $(".add-btn").click(function () {
        if ($(".num-input").val() == 5) {
            return;
        } else {
            $(".num-input").val(Number($(".num-input").val()) + 1);
            if ($(".num-input").val() == 5) {
                $(".add-btn").find("span").css("color", "rgba(0,0,0,0.5)");
            } else {
                $(".add-btn").find("span").css("color", "rgba(0,0,0,1)");
                $(".del-btn").find("span").css("color", "rgba(0,0,0,1)");
            }
        }
        $(".txt").find("span").eq(3).html($(".num-input").val())
    })

})


let needsrc = document.querySelector('.need')
let needsrc1 = document.querySelector('.need2')
let needsrc2 = document.querySelector('.need3')
let tit = document.querySelector('.tit')
let price1 = document.querySelector('.price1')
let price = document.querySelector('.price')
bind()
function bind() {
    let goodsid1 = window.sessionStorage.getItem('id')
    let goodarr = goods2.data.detail.filter(function (elem, index, data) {
        return elem.id == goodsid1
    })
    console.log(goodarr);
    goodarr.forEach(item =>{
        console.log(item.url);
        needsrc.src = item.url
        needsrc1.src = item.url
        needsrc2.src = item.url
        tit.innerText = item.title
        price.innerText = item.price
        price1.innerText = item.price
    })
    
    

}
let sub = document.querySelector('.sub-btn')
// $('sub-btn').on('click',function () { 
//     $('sub-btn').href = '../views/cart.html'
//  })
sub.onclick = function () { 
    console.log(111);
    window.location.href = '../views/cart.html'
 }